<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>H+ 后台主题UI框架 - Bootstrap Table</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="../../static/favicon.ico">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6"  th:href="@{/static/css/bootstrap.min.css(v='3.3.6')}"
          rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" th:href="@{/static/css/font-awesome.css(v='4.4.0')}"
          rel="stylesheet">
    <link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css"
          th:href="@{/static/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link href="../../static/css/animate.css" th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0" th:href="@{/static/css/style.css(v='4.1.0')}" rel="stylesheet">
    <style type="text/css">
        .input_margin {
            margin-left: 20px;
        }

        .table > thead > tr > th {
            color: #2a62bc;
        }

        /*表格内容居中*/
        .table th, .table td {
            text-align: center;
            vertical-align: middle !important;
        }

        .iPicker-container {
            font-size: 12px;
        }

        .input-sm {
            height: 32px;
        }
    </style>
</head>
<body class="white-bg">
<div class="row animated fadeInRight" style="padding: 10px">
    <div class="col-md-12">
        <div style="font-weight:700">
            <div class="ibox float-e-margins">
                <div class="ibox-content" style="padding-left: 0;padding-bottom: 0;">
                    <form class="form-inline" style="margin:15px 5px">
                        <div class="form-group">
                            <label>班级编号:</label>
                            <div class="input-group">
                                <input type="text" class="form-control input-sm" style="border-radius: 5px;width: 130px"
                                       id="clazz_number">
                            </div>
                        <div class="form-group">
                            <label>班级名称:</label>
                            <div class="input-group">
                                <input type="text" class="form-control input-sm" id="clazz_name"
                                       style="border-radius: 5px;width: 130px">
                            </div>
                        </div>

                        <div class="form-group" style="width: 200px">
                            <div class="input-group">
                                <input type="text" class="form-control org" placeholder="所属机构" id="org-search">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="form-group" style="width: 200px">
                            <div class="input-group">
                                <input type="text" class="form-control branch" placeholder="所属分支" id="branch-search">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="width: 200px">
                            <div class="input-group">
                                <input type="text" class="form-control direction" placeholder="专业方向" id="profession-search">
                                <input type="hidden" id="profession-search-id">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                            </div>
                            </div>
                            <input type="button" class="btn btn-primary btn-sm" value="查询" id="queryBtn"/>
                        </div>
                    </form>
<!--=========================================================================================================================================================-->
                </div>
            </div>
        </div>

        <!-- 全局js -->
        <script src="../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v='2.1.4')}"></script>
        <script src="../../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v='3.3.6')}"></script>
        <!-- 自定义js -->
        <script src="../../static/js/content.js?v=1.0.0" th:src="@{/static/js/content.js(v='1.0.0')}"></script>
        <!--suggest-->
        <script src="../../static/js/plugins/suggest/bootstrap-suggest.min.js"
                th:src="@{/static/js/plugins/suggest/bootstrap-suggest.min.js}"></script>
        <!-- Bootstrap table -->
        <script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js"
                th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
        <script src="../../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"
                th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
        <script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
                th:src="@{/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
        <!--iPicker-->
        <script src="../../static/js/plugins/iPicker/iPicker.min.js"
                th:src="@{/static/js/plugins/iPicker/iPicker.min.js}"></script>

        <script>
            var $picker = $('.picker');
            $.getJSON('../../owep/static/js/demo/exam/teaching.json').done(function (res) {
                $('#their').iPicker({
                    data: res,
                    width: 130,
                    height: 30,
                    placeholder: ["所属机构", "所属分支", "专业方向"],
                    onSelect: function (v, t, set) {
                        var text = "[" + t + "]";
                        var value = "[" + v + "]";
                        console.log(text + "---" + value);
                    }
                })
            })
            $(function () {

                //点击按钮开始搜索
                $("#queryBtn").click(function () {
                    let number = $("#clazz_number").val();
                    let name = $("#clazz_name").val();
                    let org = $("#org-search").val();
                    let branch = $("#branch-search").val();
                    let profession = $("#profession-search").val();
                    let professionId = $("#profession-search-id").val();
                    console.log("number=" + number);
                    //判断条件是否存在
                    if (number == "" && name == "" && org == "" && branch == "" && profession =="") {
                        alert("请选择查询条件");
                        return;
                    }
                    let url = '/owep/teaching/findClassByKeyword?classNumber=' + number + '&className=' + name + '&instituteName=' + org + '&instituteBranchName=' + branch + '&professionId=' + professionId;
                    //console.log(url);
                    $("#table").bootstrapTable('refresh',{url:url});
                });

                //查找班级选项
                var testdataBsSuggest1 = $("#org-search").bsSuggest({
                    url:"/owep/teaching/getAllInstitute",
                    idField:"instituteId",
                    keyField:"instituteName",
                    effectiveFields: ["instituteName"],
                }).on('onSetSelectValue',function (e,keyword) {
                    $("#branch-search").bsSuggest("destroy");
                    $("#branch-search").bsSuggest({
                        url: "/owep/teaching/getBranchByInstitute?id=" + keyword.id,
                        idField: "branchId",
                        keyField: "branchName",
                        effectiveFields: ["branchName"],
                    }).on('onSetSelectValue',function () {
                        $("#profession-search").bsSuggest("destroy");
                        $("#profession-search").bsSuggest({
                            url: "/owep/teaching/getProfession?instituteName=" + $("#org-search").val() + "&instituteBranchName=" + $("#branch-search").val(),
                            idField: "id",
                            keyField: "profName",
                            effectiveFields: ["profName"],
                        }).on('onSetSelectValue',function (e,keyword) {
                            $("#profession-search-id").val(keyword.id);
                        })
                    })
                });

                //更新事件
                $('#update_sure').click(function () {
                    //获取表单数据
                    var form = document.forms["updateMajorForm"];
                    var formData = new FormData(form);
                    //AJAX去提交表单数据
                    $.ajax({
                        url:"/owep/clazz/updateMajor",
                        method:"POST",
                        async:true,
                        data:formData,  //综合表单，使用formData来封装，不能用Serializable，否则无法提交
                        dataType:"text",  //期望服务端发送给客户端的数据类型。不能写成application/json
                        contentType:false,
                        processData:false,
                        success:function(data){
                            alert(data);
                            window.location.reload();
                        },
                        error:function(jqXHR){
                            alert("修改失败");
                        }
                    });
                });


            /*==================================================废的主表格=====================================================================*/
            var initdata = function () {
                var init = new Object();
                init.Init = function () {
                    //加载之前先格式化 放在查询的时候起冲突
                   // $("#table").bootstrapTable('destroy');
                    $("#table").bootstrapTable({
                        url: '/owep/teaching/allTeaching',
                        method: 'get',
                        striped: true,  //是否显示行间隔色
                        cache: false, //是否使用缓存
                        pagination: true, //是否分页
                        pageSize: 5,  //每页记录行数
                        uniqueId: 'id',  //唯一id
                        pageList: [5, 10, 20],
                        queryParams: init.queryParams, // 传递参数
                        onLoadSuccess: check,  //页面加载成功执行方法
                        onPageChange: check,   //页面发送改变执行的方法
                        columns: [{
                            field: "coo",
                            checkbox: true,
                        }, {
                            field: 'id',
                            title: "id",
                            visible: false //隐藏 让该字段不可见 为了后面更新和删除做准备
                        }, {
                            field: 'classNumber',
                            title: "班级编号",
                            align: "center",
                        }, {
                            field: 'className',
                            title: "班级名称",
                            align: "center",
                        }, {
                            field: 'profession.profName',
                            title: "专业方向",
                            align: "center",
                        }, {
                            field: 'instituteName',
                            title: "所属机构",
                            align: "center",
                        }, {
                            field: 'branchName',
                            title: "所属分支",
                            align: "center",
                        }, {
                            field: 'startTime',
                            title: "开始时间",
                            align: "center",
                        }, {
                            field: 'endTime',
                            title: "结束时间",
                            align: "center",
                        }, {
                            field: 'operator',
                            title: "操作",
                            align: "center",
                            valign: "middle",
                            formatter: function (row,value,index) {
                                return '<button id = "" type = "button" class = "enterBtn btn btn-white" title="进入班级"></button>'
                            }, //方法调用
                            events: {
                                'click .enterBtn': function (e, value, row, index) {
                                    window.location.href = "/owep/teaching/classList?classId="+row.id+"&className="+row.className;
                                },
                            }
                        }]

                    });
                };
                init.queryParams = function (params) {
                    console.log(params);
                    console.log($('#name').val());
                    return {
                        offset: params.offset,//从数据库第几条记录开始
                        limit: params.limit,//找多少条
                        name: $("#name").val(),
                        org: $("#org").val(),
                        branch: $("#branch").val()
                    };
                };

                function check(data) {
                    /*初始化滑动按钮*/
                    $(".js-switch-1").each(function (index, elements) {
                        new Switchery(elements);
                        //监听按钮点击事件
                        $(elements).on("change", function () {
                            //TODO 发送ajax请求s
                            //获取滑动按钮爷级元素tr里面data-index的值
                            // let index = $(elements).parent().parent().attr("data-index");
                            let index = $(elements).parents("tr").attr("data-index");
                            //获取id
                            let id = data[index].id;
                            console.log(id);
                            $.ajax({
                                //发送AJAX请求
                                url: "/owep/clazz/clazzTrigger?id=" + id + "&check=" + elements.checked,
                                method: "GET",
                                async: true,
                                dataType: "text",
                                success: function (data) {
                                    alert(data);
                                },
                                error: function (jqXHR) {
                                    alert("操作失败");
                                }

                            });
                        })
                    })
                };

                return init;
            }

            var courseData = function(){
                var init = new Object();
                init.Init = function (planId,selectedTable) {
                    $(selectedTable).bootstrapTable('destroy')
                    $(selectedTable).bootstrapTable({
                        url: '/owep/clazz/findAllCourseByPlan?id=' + planId,
                        method: 'get',
                        striped: true,  //是否显示行间隔色
                        cache: false, //是否使用缓存
                        pagination: true, //是否分页
                        pageSize: 5,  //每页记录行数
                        uniqueId: 'id',  //唯一id
                        pageList: [5, 10, 20],
                        queryParams: init.queryParams, // 传递参数
                        columns: [{
                            field: 'id',
                            title: 'id',
                            visible: false //隐藏 让该字段不可见 为了后面更新和删除做准备
                        }, {
                            field: 'courseNumber',
                            title: '课程编号',
                            align: "center",
                        }, {
                            field: 'courseName',
                            title: '课程名称',
                            align: "center",
                        }]
                    });
                };

                return init;
            }

                //向服务端发送请求的参数
                function queryParams(params) {
                    return {
                        offset: params.offset,//从数据库第几条记录开始
                        limit: params.limit,//找多少条
                        stu_number: $("#stu_number").val(),
                        stu_name: $("#stu_name").val(),
                    };
                };
            });
        </script>

        <table id="table" data-mobile-responsive="true">
            <script>

                let d;
                // ================================================表格初始化======================================================================
                $('#table').bootstrapTable({
                    url:'/owep/teaching/allTeaching',
                    dataType: "json",
                    method:'GET',
                    pagination: true, //分页
                    pageSize: 5,    //每页初始数量
                    striped: true, //条纹
                    pageNumber: 1, //默认当前页
                    pageList: [5, 10, 25, 50],
                    columns: [{
                        checkbox: true,
                    }, {
                        field: 'id',
                        title: "id",
                        visible: false //隐藏 让该字段不可见 为了后面更新和删除做准备
                    }, {
                        field: 'classNumber',
                        title: "班级编号",
                        align: "center",
                    }, {
                        field: 'className',
                        title: "班级名称",
                        align: "center",
                    }, {
                        field: 'profession.profName',
                        title: '专业方向',
                    }, {
                        field: 'instituteName',
                        title: '所属机构',
                    }, {
                        field: 'branchName',
                        title: '所属分支',
                    }, {
                        field: 'startTime',
                        title: '开始时间',
                    }, {
                        field: 'endTime',
                        title: '结束时间',
                    }, {
                        field: 'operate',
                        title: '操作',
                        width: 80,
                        formatter:   function (row,index,value) {
                            return ['<button id = "bind" type = "button" class = "enterBtn btn btn-xs btn-success" >进入班级</button>'];
                        },//表格中增加按钮
                        events: {
                            'click .enterBtn': function (e, value, row, index) {
                                window.location.href = "/owep/teaching/classList?classId="+row.id+"&className="+row.className;
                            },
                        }
                    }],

                });
            </script>
        </table>
    </div>
</div>
</body>
</html>